/* JS for tab "video dataset" card */

class VideoData_Card {

    constructor({id, video_title, year, video_origin, video_link}) {
        this._id = id + "";
        this._title = video_title + "";
        this._year = year + "";
        this._origin = video_origin + "";
        this._link = video_link + "";
    }

    // * video dataset card example
    // <div class="col video-deck-single">
    //     <div class="card">
    //         <img src="/assets/image/1.png" class="card-img-top" alt="...">
    //         <div class="card-body">
    //             <a href="#" class="card-title">A brief history of America and C…</a>
    //             <p class="card-text">Vox · 2016</p>
    //         </div>
    //     </div>
    // </div>
    createCard () {
        let deck_single = document.createElement("div.col.video-deck-single");
        let card = document.createElement("div.card");
        let cardImg_Html = `<img src="/assets/image/${this._id}.png" class="card-img-top">`;
        let card_body = document.createElement("div.card-body");
        let cardTitle_Html = `<a href="${this._link}" class="card-title">${this._title}</a>`;
        let cardText_Html = `<p class="card-text">${this._origin} · ${this._year}</p>`;

        for (html in [cardTitle_Html, cardText_Html]) {
            card_body.appendChild(html);
        }

        for (html in [cardImg_Html, card_body]) {
            card.appendChild(html);
        }

        deck_single.appendChild(card);
        
        return deck_single_node;
    }
}

VideoData_Card.prototype.appendTo = function (parentNode, nextNode) {
    if(!(parentNode instanceof HTMLElement)) {
        return console.error(`${parentNode} is not a DOM node!`);
    }

    let deck_single_node = this.prototype.createCard();
    parentNode.insertBefore(deck_single_node, nextNode);
    return true;
}

export {VideoData_Card as VideoData_Card};